<!-- 设备管理-变更历史页面 -->
<template>
  <div class="equip-wrap-common">
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 294px)" border>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <px-tooltip content="历史记录" placement="top">
            <px-button link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <EquipHistoryDetail :viewDialogVisible="viewDialogVisible" :id="id" @closeDialog="viewDialogVisible = false" />
  </div>
</template>

<script setup lang="ts">
import { getEquipHistoryList } from "@/api/equip/archive";
import { reactive, toRefs, watchEffect } from "vue";
import { useRouter } from "vue-router";
import EquipHistoryDetail from "./EquipHistoryDetail.vue";

const router = useRouter();
const state = reactive<any>({
  tableColumns: [
    { prop: "modifyTime", label: "变更时间", minWidth: "120", showOverflowTooltip: true },
    { prop: "modifyByName", label: "变更人", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  viewDialogVisible: false,
  id: ""
});
const { tableColumns, tableData, viewDialogVisible, id } = toRefs(state);

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["eqpDetailData", "activeName"]);

// 查询设备列表
const queryTable = async () => {
  const params = {
    eqpId: props.eqpDetailData.eqpId
  };
  const data = await getEquipHistoryList(params);
  tableData.value = data || [];
};
// 监视tab为历史记录
watchEffect(async () => {
  if (props.activeName === "changeHistory") {
    queryTable();
  }
});
// 详情
const handleView = (row: any) => {
  viewDialogVisible.value = true;
  id.value = row.id;
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: 100%;
  padding: 0;
}
</style>
